<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>系统设置</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="{{resource}}/mini/lib/layui-v2.5.5/css/layui.css" media="all">
</head>

<body><br />
    <div class="layui-container">
        <blockquote class="layui-elem-quote" style="color:red;">
            !> 非专业人员请勿随意使用本功能，将造成不可预估的后果哦！！
        </blockquote>
        <div>
            <form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item" pane>
                    <label class="layui-form-label">目标数据库</label>
                    <div class="layui-input-block">
                        <select name="to-db" lay-filter="target">
                            <option value="0">Official</option>
                            {{# dblist}}
                            <option value="{{id}}">{{name}}</option>
                            {{/ dblist}}
                        </select>
                    </div>

                </div>
            </form>
        </div>

        <div>
            <textarea id="sql-code" style="font-size:18px;" placeholder="请输入需要运行的SQL语句..." rows="8"
                class="layui-textarea"></textarea>
            <br />
            <button type="button" class="layui-btn" style="float:right;" id="run-sql">运行SQL代码</button>
            <br><br><br>
        </div>

        <div>
            <div class="layui-collapse" id="result-list" lay-accordion>
            </div>
            <div id="result-template" style="display: none;">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">%RESULT%</h2>
                    <div class="layui-colla-content">
                        <pre>%CONTEXT%</pre>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <script src="{{resource}}/mini/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
    <script src="{{resource}}/mini/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>

    <script>
        layui.use(['form', 'element'], function () {
            var form = layui.form;
            var element = layui.element;

            var target = 0;
            form.on('select(target)', function (data) {
                target = data.value;
            });

            $("#run-sql").click(function () {
                var context = $("#sql-code").val();

                var arr = context.split("\n");
                var querys = arr.filter(function (s) {
                    return s && s.trim();
                 });

                $.post("/admin/api/dbs/runsql", {
                    target: target,
                    querys: querys
                }, function (data) {
                    if (data.code == "200") {

                        var template = $("#result-template").html();

                        $("#result-list").html("");
                        for (var i in data.data) {
                            var temp = template;
                            var resp = data.data[i];

                            state = "SQL: [" + (parseInt(i) + 1) + "] 运行结果 ✅";
                            
                            temp = temp.replace('%RESULT%',state)
                            
                            if(resp == ""){
                                resp = "没有结果就是最好的结果哦！";
                            }

                            temp = temp.replace('%CONTEXT%',JSON.stringify(resp,null, 4))

                            $("#result-list").append(temp);
                        }
                        element.render('collapse');
                    }
                });
            })

        });
    </script>

</body>

</html>